/* eslint-disable react-hooks/rules-of-hooks */
import React, { useState } from 'react'
import {
  Steps,
  Form,
  Input,
  Button,
  Select,
  DatePicker,
  Table,
  Tag,
  Space,
} from 'antd'
import { CheckCircleFilled } from '@ant-design/icons'

const { Option } = Select
//第二步中 表格的数据部分
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
]
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    address: 'Sidney No. 1 Lake Park',
  },
]

// rowSelection object indicates the need for row selection
const rowSelection = {
  getCheckboxProps: (record) => ({
    disabled: record.name === '', // Column configuration not to be checked
    name: record.name,
  }),
}

function createPaper() {
  //第三步中预览的题目的数据部分
  let questions = [
    {
      type: 3,
      question: '说说您今天干了什么事',
      answer: ['今天上厕所了'],
      right: 'gj',
      socerAll: 2,
    },
    {
      type: 2,
      question: '我的问题是什么',
      answer: ['对', '错'],
      right: '对',
      socerAll: 6,
    },
    {
      type: 1,
      question: '函数的参数是什么',
      answer: ['x', 'y', 'z', 'a'],
      right: 'a',
      socerAll: 4,
    },
  ]
  questions = questions.sort((a, b) => a.type - b.type)
  const { Step } = Steps
  //当前的步骤是第几步
  const [current, setCurrent] = useState(2)
  //第一步中需要的试卷名称试卷总分等
  const [paperName, setPaperName] = useState('')
  const [paperCount, setPaperCount] = useState('')
  const [testClass, setTestClass] = useState('')
  const [testStartDate, setTestStartDate] = useState('')
  const [testStartTime, setTestStartTime] = useState('')
  const [testEndDate, setTestEndDate] = useState('')
  const [testEndTime, setTestEndTime] = useState('')
  const [selectionType] = useState('checkbox') //表格的复选框状态

  const [form] = Form.useForm()
  // 修改试卷名称的函数
  const handlerNameChange = (e) => {
    console.log(e.target.value)
    setPaperName(e.target.value)
  }
  const handlerTestCount = (e) => {
    console.log(e.target.value)
    setPaperCount(e.target.value)
  }
  // 修改考试班级的函数
  const handlerClass = (e) => {
    console.log(e)
    setTestClass(e)
  }
  // 修改开始的时间
  const handlerStartDate = (date, dateString) => {
    console.log(dateString)
    setTestStartDate(dateString)
  }
  const handlerStartTime = (date, dateString) => {
    console.log(dateString)
    setTestStartTime(dateString)
  }
  // 修改结束的时间
  const handlerEndDate = (date, dateString) => {
    console.log(dateString)
    setTestEndDate(dateString)
  }
  const handlerEndTime = (date, dateString) => {
    console.log(dateString)
    setTestEndTime(dateString)
  }
  //点击选项时的效果
  const handlerCheckSelect = (e) => {
    let parentNode = e.target.parentNode.parentNode.parentNode.children
    Array.from(parentNode).forEach((item) => {
      // 将HTMLCollection对象转为数组
      item.children[0].children[0].className = 'ant-tag ant-tag-blue'
    })
    e.target.className = 'ant-tag ant-tag-orange'
  }
  // 第一次点击下一步执行的函数
  const handlerFirstClick = () => {
    if (
      paperName &&
      paperCount &&
      testClass &&
      testStartDate &&
      testStartTime &&
      testEndDate &&
      testEndTime
    ) {
      // 如果表单里面的值都不为空，才能进行下一步
      console.log(1)
      setCurrent(1)
    } else {
      console.log(0)
    }
  }
  //第二次点击下一步执行的函数
  const handlerSecondClick = () => {
    setCurrent(2)
  }

  return (
    <div>
      {current !== 2 && (
        <>
          <div>
            {/* 步骤条界面 */}
            <Steps size="small" current={current}>
              <Step title="试卷设置" />
              <Step title="选择试题" />
              <Step title="预览" />
            </Steps>
            ,
          </div>
        </>
      )}
      {current === 2 && (
        <>
          <div
            style={{
              height: '60px',
              width: '100%',
              lineHeight: '60px',
              fontSize: '20px',
              border: '1px solid #ccc',
              marginBottom: '20px',
            }}
          >
            {/* 第三步预览模式的头部 */}
            <CheckCircleFilled
              style={{ color: 'green', marginRight: '10px', fontSize: '30px' }}
            />
            已成功保存，现在是预览模式
          </div>
          <div
            style={{
              width: '300px',
              height: '400px',
              position: 'absolute',
              right: '15px',
              backgroundColor: 'red',
              border: '1px solid #ccc',
            }}
          >
            {/* 考试信息的部分 */}
          </div>
        </>
      )}
      <div>
        {/* 表单界面 */}
        {current === 0 && (
          <>
            <div
              style={{
                width: '600px',
                position: 'absolute',
                left: '50%',
                transform: 'translate(-50%)',
              }}
            >
              {/* 试卷设置的表单盒子 */}
              <Form
                form={form}
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
              >
                <Form.Item label="试卷名称">
                  <Input
                    placeholder="请输入试卷名称"
                    onChange={handlerNameChange}
                  />
                </Form.Item>
                <Form.Item label="试卷总分">
                  <Input
                    placeholder="请输入试卷总分"
                    onChange={handlerTestCount}
                    type="number"
                  />
                </Form.Item>
                <Form.Item
                  name="testClass"
                  label="考试班级"
                  rules={[{ required: true }]}
                >
                  <Select
                    placeholder="选择参加考试的班级"
                    onChange={handlerClass}
                    allowClear
                  >
                    <Option value="male">male</Option>
                    <Option value="female">female</Option>
                    <Option value="other">other</Option>
                  </Select>
                </Form.Item>
                <Form.Item label="开始时间">
                  <DatePicker
                    onChange={handlerStartDate}
                    picker="date"
                    style={{ marginRight: '50px' }}
                  />
                  <DatePicker onChange={handlerStartTime} picker="time" />
                </Form.Item>
                <Form.Item label="结束时间">
                  <DatePicker
                    onChange={handlerEndDate}
                    picker="date"
                    style={{ marginRight: '50px' }}
                  />
                  <DatePicker onChange={handlerEndTime} picker="time" />
                </Form.Item>
                <Form.Item wrapperCol={{ span: 14, offset: 4 }}>
                  <Button type="primary" style={{ marginRight: '15px' }}>
                    取消
                  </Button>
                  <Button type="primary" onClick={handlerFirstClick}>
                    下一步
                  </Button>
                </Form.Item>
              </Form>
            </div>
          </>
        )}
        {current === 1 && (
          <>
            <div className="selectTextHead" style={{ height: '15px' }}>
              <Button
                type="primary"
                style={{ float: 'left', marginRight: '10px' }}
              >
                添加试题
              </Button>
              <Button
                type="danger"
                style={{ float: 'left', marginRight: '10px' }}
              >
                删除试题
              </Button>
              共选择了4题，其中单选题4题，多选题0题，判断题0题
              &nbsp;&nbsp;&nbsp;&nbsp;试题总分80分，其中单选20分，多选题40分，判断题20分
            </div>
            <br />
            <hr style={{ marginBottom: '15px' }} />
            <Table
              rowSelection={{
                type: selectionType,
                ...rowSelection,
              }}
              columns={columns}
              dataSource={data}
              pagination={{ position: ['bottomCenter'] }}
            />
            <Button type="primary" style={{ marginRight: '15px' }}>
              取消
            </Button>
            <Button type="primary" onClick={handlerSecondClick}>
              保存并预览
            </Button>
          </>
        )}
        {current === 2 && (
          <div
            style={{
              width: '900px',
              border: '1px solid #ccc',
              padding: '25px',
            }}
          >
            {questions.map((item, index) => {
              return (
                <div key={index} style={{ width: '700px' }}>
                  <div
                    style={{
                      width: '300px',
                      textAlign: 'left',
                      margin: '20px 0',
                    }}
                  >
                    {/* 问题部分 */}
                    {index + 1}.
                    <Tag color="green">
                      {(item.type === 1 && '单选题') ||
                        (item.type === 2 && '判断题') ||
                        (item.type === 3 && '简答题')}
                    </Tag>
                    {item.question}?&nbsp;&nbsp;({item.socerAll}分)
                  </div>
                  <div style={{ width: '300px', textAlign: 'center' }}>
                    {/* 答案部分 */}

                    <Space direction="horizontal" wrap="true" size={'large'}>
                      {item.answer.map((ansitem, index) => {
                        return (
                          <div key={index + 99} data-index={index}>
                            <Tag
                              color="blue"
                              style={{
                                width: '180px',
                                height: '30px',
                                lineHeight: '30px',
                                float: 'left',
                              }}
                              onClick={(e) => {
                                handlerCheckSelect(e)
                              }}
                            >
                              {ansitem}
                            </Tag>
                          </div>
                        )
                      })}
                    </Space>
                  </div>
                </div>
              )
            })}
            <Button type="primary" style={{ marginRight: '15px' }}>
              返回修改
            </Button>
            <Button type="primary" onClick={handlerSecondClick}>
              发布试卷
            </Button>
          </div>
        )}
      </div>
    </div>
  )
}

export default createPaper
